<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      :btn-list="fullInfo.btnList"
    >
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :label-width="formInfo.labelWidth"
            :rules="formInfo.rules"
          >
            <template v-slot:form-depotName>
              <el-input
                v-model="formInfo.data.depotName"
                class="not-mongolia"
                type="input"
                :required="true"
                :disabled="true"
                placeholder="请选择仓库"
              >
                <template #append>
                  <el-icon @click="selectDepot"><MoreFilled /></el-icon>
                </template>
              </el-input>
            </template>
          </page-form>
        </div>
      </div>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>例外产品</p>
        </div>
        <div class="model-panel-body">
          <div class="layui-card-body fullBox table-height">
            <!-- 条件栏 -->
            <page-filter
              v-model:query="filterInfo.query"
              :filter-list="filterInfo.list"
            >
              <template v-slot:filter-removeProduct>
                <el-button
                  :disabled="!canRemoveProduct"
                  @click="removeProduct()"
                  >删除产品</el-button
                >
              </template>
            </page-filter>
            <div class="flex_full_item">
              <!-- 表格 -->
              <el-form ref="tableForm" :model="tableInfo" style="width: 100%">
                <page-table
                  :refresh="tableInfo.refresh"
                  :init-curpage="tableInfo.initCurpage"
                  v-model:data="tableInfo.data"
                  :api="getDepotProductAll"
                  :pager="false"
                  :query="filterInfo.query"
                  :field-list="tableInfo.fieldList"
                  :handle="tableInfo.handle"
                  :tab-index="true"
                  :isDynamic="true"
                  :="isDynamic"
                  @handleEvent="handleEvent"
                >
                  <template v-slot:col-licenseNumber="scope">
                    <p>{{ scope.row.licenseNumber }}</p>
                    <p>{{ scope.row.brandName }}</p>
                  </template>
                  <template v-slot:col-commonName="scope">
                    <p>{{ scope.row.commonName }}</p>
                    <p>{{ scope.row.productCode }}</p>
                    <p>{{ scope.row.alias }}</p>
                  </template>
                  <template v-slot:col-type="scope">
                    <p>{{ scope.row.productTypeValue }}</p>
                    <p>{{ scope.row.codeTypeValue }}</p>
                    <p>{{ scope.row.productCategoryValue }}</p>
                  </template>
                  <template v-slot:col-standard="scope">
                    <p>{{ scope.row.standard }}</p>
                    <p>{{ scope.row.unitName }}</p>
                  </template>
                </page-table>
              </el-form>
            </div>
            <select-product
              v-if="productInfo.visible"
              v-model:show-dialog="productInfo.visible"
              :query="productInfo.query"
              @callback="_selectProduct"
            />
          </div>
        </div>
      </div>
    </NewFullScreen>
    <SelectDepot
      v-if="selectDepotInfo.visible"
      v-model:show-dialog="selectDepotInfo.visible"
      :check-box="false"
      :query="selectDepotInfo.query"
      :highlight-row="true"
      :is-lock="false"
      :save-empty="true"
      @callback="selectDepotCallBack"
    />
  </div>
</template>

<script setup name="depotProductDetailManage">
import {
  getDepotProductById,
  updateDepotProduct,
  getDepotProductAll,
} from '@/api/core'
const props = defineProps(['visible', 'title', 'id'])
const { proxy } = getCurrentInstance()
const emits = defineEmits()

// 过滤相关配置
const filterInfo = ref({
  query: {
    coreDepotProductId: props.id,
  },
  list: [
    { type: 'button', label: '添加例外', event: addProduct },
    { type: 'slot', value: 'removeProduct' },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    { label: '证号\n生产厂家', value: 'licenseNumber', type: 'slot' },
    { label: '通用名称\n编码\n别名', value: 'commonName', type: 'slot' },
    {
      label: '产品类型\n条码类型\n产品分类',
      value: 'type',
      type: 'slot',
    },
    { label: '规格\n计量单位', value: 'standard', type: 'slot' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '删除产品',
        event: removeProduct,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: true,
      },
    ],
  },
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {
    depotName: '',
    depotId: '',
    status: 1,
    isReceiveConsume: 1,
  },
  fieldList: [
    {
      label: '仓库名称',
      value: 'depotName',
      type: 'slot',
    },
    {
      label: '状态',
      value: 'status',
      type: 'radio-model',
      code: 'enabled_type',
    },
    {
      label: '是否以领定消',
      value: 'isReceiveConsume',
      type: 'select-model',
      code: 'yes_or_no',
    },
  ],
  rules: {
    depotName: [{ required: true, message: '请选择仓库', trigger: 'change' }],
  },
  labelWidth: '160px',
})
const fullInfo = ref({
  btnList: [{ label: '保存', event: save, show: true }],
})
//选择产品相关
const productInfo = ref({
  visible: false,
  query: {
    idNotIn: '',
  },
})
const selectDepotInfo = ref({
  visible: false,
  query: {
    depotAuth: 'id',
    status: 1,
    useTypeId: '1',
  },
})

const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emits('update:visible', newValue) // 更新父组件visible
  },
})

const canRemoveProduct = computed(() => {
  return tableInfo.value.selections.length != 0
})

onMounted(() => {
  if (props.id) {
    getList()
    getMain()
  }
})

// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
// 搜索
function getMain() {
  getDepotProductById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
    }
  })
}
function removeProduct(row) {
  let _tableInfo = tableInfo.value
  if (row && row.productId) {
    _tableInfo.data = _tableInfo.data.filter((item) => item !== row)
  } else {
    proxy
      .$confirm('删除后将改变数据,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        _tableInfo.data = tableInfo.value.data.filter((item) => {
          return !_tableInfo.selections.includes(item)
        })
      })
  }
}
function selectDepotCallBack(data = undefined) {
  if (data && data.id) {
    formInfo.value.data.depotName = data.name
    formInfo.value.data.depotId = data.id
  } else {
    formInfo.value.data.depotName = ''
    formInfo.value.data.depotId = ''
  }
  selectDepotInfo.value.visible = false
  tableInfo.value.data = []
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      filterInfo.value.list[1].disabled = !tableInfo.value.selections.length
      break
  }
}
function save() {
  formInfo.value.ref.validate((valid) => {
    if (valid) {
      saveDetail()
    }
  })
}
function saveDetail() {
  let data = {
    coreDepotProductVO: formInfo.value.data,
    coreDepotProducts: [],
  }

  data.coreDepotProducts = tableInfo.value.data.map((item) => {
    return {
      depot: props.id,
      productId: item.productId,
    }
  })
  updateDepotProduct(data).then((resp) => {
    if (resp && resp.success) {
      showDialog.value = false
      emits('returnModify', false)
    }
  })
}
function selectDepot() {
  selectDepotInfo.value.visible = true
}
function addProduct() {
  productInfo.value.query.idNotIn = tableInfo.value.data
    .map(function (item) {
      return item.productId
    })
    .toString()
  productInfo.value.visible = true
}
function _selectProduct(rows) {
  if (rows) {
    let newData = []
    rows.map((item) => {
      newData.push({
        ...item,
        id: null,
        productId: item.id,
        productCode: item.code,
        productType: item.type,
      })
    })
    tableInfo.value.data.push(...newData)
  }
}
</script>

<style scoped lang="scss">
:deep(.page-table) > .el-table {
  overflow-y: hidden;
}
</style>
